<template>
  <div class="mapPoint_warp">
    <el-input
      class="input_style"
      readonly
      type="text"
      :value="nameArr"
      :destroy-on-close="true"
      placeholder="请选择任务"
    />
    <el-input type="hidden" :value="$props.modelValue" placeholder="请选择任务" />
    <el-button type="primary" @click="showDialog" style="margin-left: 5px">请选择</el-button>
    <el-dialog
      title="选择任务"
      v-if="state.dialogVis"
      v-model="state.dialogVis"
      :before-close="close"
    >
      <template #footer>
        <TransferDialog
          ref="transferRef"
          :data="props.data"
          v-model:values="valueArr"
        ></TransferDialog>
        <el-button @click="commit" type="primary">确定</el-button>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue';
import TransferDialog from './transferDialog.vue';
const state = reactive({
  dialogVis: false,
  tasks: [],
});
const transferRef = ref(null);
const valueArr = ref([]);
const emit = defineEmits(['update:modelValue','change']);
const arrs = ref([]);
const firstOpen = ref(true);
const nameArr = computed(() => {
  if (firstOpen.value) {
    return props.name;
  } else {
    return arrs.value;
  }

});
const showDialog = () => {
  valueArr.value = props.modelValue;
  state.dialogVis = true;
  firstOpen.value = false;
};
const commit = () => {
  let newArr = [];
  arrs.value = [];
  for (let i of props.data) {
    for (let j of valueArr.value) {
      if (j == i.key) {
        arrs.value.push(i.label);
        newArr.push(j);
      }
    }
  }
  nameArr.value = arrs.value.join();
  emit('update:modelValue', newArr);
  emit('change', newArr);
  state.dialogVis = false;
};
const close = () => {
  state.dialogVis = false;
};
watch(props.modelValue, () => {
  if (props.modelValue) {
    try {
    } catch (e) {
    }
  }
});
const props = defineProps({
  modelValue: {
    type: [Array],
    default() {
      return [];
    },
  },
  data: Array,
  name: String,
});
</script>

<style lang="scss" scoped>
.mapPoint_warp {
  display: flex;
  flex-direction: row;
}
</style>
